<template>
  <div class="login-wrap">
    <div class="ms-title1">
      
    <!-- <img src="../../assets/img/LOGO1.png" alt=""> -->
    <!-- <img src="https://sb-soft.oss-cn-hangzhou.aliyuncs.com/oem/whmnrc_logo.png" alt=""> -->
    <!-- <img src="../../assets/img/FLASHPAYlogin.png" alt=""> -->
    
    </div>
    <div class="ms-login">
      
      <div class="ms-title">
        <!-- <img src="../../assets/img/zongheguanli.png" alt> -->
        <div>中信金沙湾国际乐园支付平台</div>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
        <el-form-item prop="username" class="ms-content1">
          <el-input v-model="ruleForm.username" placeholder="账号/手机号" size='medium'	>
            <!-- <i slot="prepend" icon="el-icon-lx-people el-input__icon"></i> -->
            <i slot="prefix" class="el-input__icon el-icon-lx-people"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="ms-content1">
          <el-input
            type="password"
            placeholder="密码"
            v-model="ruleForm.password"
             size='medium'
          >
            <i slot="prefix" class="el-input__icon el-icon-lx-lock"></i>
          </el-input>
        </el-form-item>
        <div class="validation">
          <el-input class="wid" v-model="ruleForm.validation" placeholder="验证码" size='medium' @keyup.enter.native="submitForm('ruleForm')">
            
          </el-input>
          <!-- <i slot="prefix" class="el-input__icon el-icon-tickets"></i> -->
            <div slot="suffix" class="code" @click="refreshCode">
              <Sidentify :identifyCode="identifyCode" style="height:40px"></Sidentify>
            </div>
        </div>
        <div class="passwordBox">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <span class="forgotpassword" @click="forget()">忘记密码</span>
        </div>
        <div class="login-btn">
          <el-button type="primary" size='medium' @click="submitForm('ruleForm')">登录</el-button>
        </div>
      </el-form>
      <!-- <div class="oldurl"><img src="../../assets/img/LOGO.png" alt=""><a target="_blank" href="http://b.v3.51shoubei.com">老后台登录入口</a></div> -->
    </div>
  </div>
</template>

<script>
import Sidentify from "../page/identify";
import { login } from "@/api/api";
import Cookies from 'js-cookie'
import md5 from "js-md5";
export default {
  data: function() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",
      checked: false,
      ruleForm: {
        username: "",
        password: "",
        validation: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  components: {
    Sidentify
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    if(Cookies.get('logininfo')){
      this.checked = true
      this.ruleForm.username = Cookies.get('logininfo').split('&')[0]
      this.ruleForm.password = Cookies.get('logininfo').split('&')[1]
    }
   
  },
  methods: {
    submitForm(formName) {
      // console.log(this.checked)
      // this.$refs[formName].validate((valid) => {
      //     if (valid) {
              // sessionStorage.setItem('ms_username',this.ruleForm.username);
              // this.$router.push('/');
          // } else {
          //     console.log('error submit!!');
          //     return false;
          // }
      // });
      if (this.ruleForm.validation != this.identifyCode) {
        this.$message({
          showClose: true,
          message: "验证码错误",
          type: "error"
        });
      } else {
        login({
          username: this.ruleForm.username,
          password: md5(this.ruleForm.password)
        }).then(res => {
          // console.log(res);
          if (res.code == 200) {
             if(this.checked){
              var inFifteenMinutes = new Date(new Date().getTime() + 7 * (24 * 60 * 60 * 1000));
              Cookies.set('logininfo',this.ruleForm.username+'&'+this.ruleForm.password,{expires: inFifteenMinutes})
            }else{
              Cookies.remove('logininfo')
            }
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success"
            });
             sessionStorage.setItem('token',res.data.token);
             sessionStorage.setItem('key',res.data.key);
             sessionStorage.setItem('instNo',res.data.instNo);
             sessionStorage.setItem('menuList',JSON.stringify(res.data.menuList));
             sessionStorage.setItem('userInfo',JSON.stringify(res.data.userInfo))
             sessionStorage.setItem('username',res.data.userInfo.username)
             sessionStorage.setItem('oemFlag',res.data.oemFlag)
             sessionStorage.setItem('oeminfo',JSON.stringify(res.data.oemInfo))
             
             this.$store.state.logininfo = res.data
            //  console.log(this.$store.state.logininfo)
            if(res.data.passwordFlag == 1){
              if(res.data.userInfo.rolesId == 5 || res.data.userInfo.rolesId == 6){
                this.$router.push({ path: "/",
                query: { 
                      initial: '2',
                  }
              }) 
              }else{
                this.$router.push({ path: "/",
                  query: { 
                        initial: '1',
                    }
                })
              }
               
            }else{
               this.$router.push({ path: "/"}) 
            }
             
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error"
            });
          }
        });
      }

    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCode, 4);
      // console.log("当前验证码==", this.identifyCode);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    forget(){
       this.$router.push({ path: "/forgetpassword"}) 
    }
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /* background: url(../../assets/img/login-bg.png) no-repeat #000;
  background-size: 100%;
  background-position-y: -245px; */
  background: url(../../assets/img/bg.png) center no-repeat;
  background-size: cover;
}
.ms-title {
  padding-top: 20px;
  width: 100%;
  margin-bottom: 10px;
  line-height: 50px;
  text-align: center;
  font-size: 28px;
  /* color: #fff; */
}
.ms-title1 img{
  padding-top: 70px;
  padding-left: 70px;
}
.ms-title img{
  padding-top: 30px;
}
.ms-login {
  position: absolute;
  padding-left: 10px;
  padding-right: 10px;
  left: 80%;
  top: 50%;
  width: 400px;
  height: 420px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.ms-content1{
  margin-bottom: 25px;
}
.login-btn {
  text-align: center;
  margin-top: 20px;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
  background: #2E71D9
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.validation {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
}
.el-input__suffix {
  right: 0px !important;
}
input{
  background: #f0f0f0 !important;
}
.wid{
  width: 60%;
  /* width: 100%; */
}
/* .wid input{
  width: 55% !important;
} */
.validation{
  margin-bottom: 25px;
  position: relative;
}
.code{
      position: absolute;
      height: 38px;
    right: -5px;
}
.oldurl{
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  margin-top: -20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.oldurl img{
  height: 18px;
  margin-right: 10px;
}
.oldurl a{
  color: red;
  font-size: 16px;
}
.passwordBox{
  width: 100%;
  margin-top: -15px;
  margin-bottom: 10px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.passwordBox .forgotpassword{
  color: #409EFF;
  text-decoration:underline;
  cursor:pointer;
  font-size: 14px;
}
</style>